<template>
  <view class="express-weight-page">
    <view class="step-wrap">

      <uni-number-box
        v-model="weight"
        width="50"
        :min="1"
        @change="handleChange"
      ></uni-number-box>
    </view>

    <view class="price-info-wrap">
      <view class="price">
        <tiext class="val">{{ freight }}</tiext>
        <view class="unit">元</view>
      </view>
      <view class="tip">起重 <text class="import">{{weightTemplateInfo.price}}</text> 元(1公斤)，续重 <text class="import">{{weightTemplateInfo.continuous_price}}</text> 元/公斤</view>
    </view>

    <view class="tip-wrap">
      <view class="tip-tag">
        <uni-tag
          text="运费估算说明"
          type="default"
          size="small"
        ></uni-tag>
      </view>
      <view class="tip-text">此价格为估算运费，实际重量与费用请与快递员确认</view>
    </view>

    <view class="bottom-btn">
      <van-button
          color="#FF9600"
          custom-class="button-cus"
          type="primary"
          @click="handleSureWeight"
      >确定</van-button>
    </view>
  </view>
</template>

<script>
import {
  floatObj
} from '@/utils/utils'
const app = getApp()
export default {
  data() {
    return {
      freight: 1,
      weight: 1,
      weightTemplateInfo: {
        price: 1,
        continuous_price: 1
      }
    };
  },
  methods: {
    handleGetGoodsWeightInfo() {
      app.request({}, '/api/logistics/order/cfg').then((res) => {
        const {
          code,
          data
        } = res

        if (code === 1) {
          this.weightTemplateInfo = data
        }
      })
    },
    handleChange(data) {
      console.log(data);

      this.handleCalculateFreight()
    },
    handleCalculateFreight() {
      const {
        weight,
        weightTemplateInfo
      } = this
      const {
        continuous_price,
        price
      } = weightTemplateInfo

      let renewalWeightPrice = floatObj.multiply((weight - 1), parseFloat(continuous_price))

      this.freight = floatObj.add(renewalWeightPrice, parseFloat(price))
    },
    handleSureWeight() {
      const {
        freight,
        weight,
        weightTemplateInfo
      } = this
      const eventChannel = this.getOpenerEventChannel()

      eventChannel.emit('selectExpressWeight', {
        freight,
        weight,
        weightTemplateInfo,
        showWeight: weight + '公斤',
        showFreight: freight + '元',
      })

      uni.navigateBack()
    }
  },
  onLoad() {
    this.handleGetGoodsWeightInfo()
  },
}
</script>

<style lang="scss">
.express-weight-page {
  position: relative;
  min-height: 100vh;
  background-color: #F2F2F2;

  .step-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 116rpx;
    background-color: #fff;
    .input-cus {
      font-size: 32rpx;
      color: #197AD9;
    }

  }

  .price-info-wrap {
    width: 100%;
    height: 194rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-top: 1rpx solid #F0F1F6;
    background-color: #FCFCFC;
    .price {
      display: flex;
      align-items: flex-end;
      margin-bottom: 24rpx;
      .val {
        color: #F8970C;
        font-size: 32rpx;
      }
      .unit {
        font-size: 18rpx;
        margin-left: 8rpx;
        margin-bottom: 4rpx;
        color: #999999;
      }
    }

    .tip {
      font-size: 22rpx;
      .import {
        color: #F8970C;
      }
    }
  }

  .tip-wrap {
    padding: 36rpx;
    box-sizing: border-box;

    .tip-text {
      margin-top: 22rpx;
      font-size: 24rpx;
      color: #999999;
    }
  }


  .bottom-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    .button-cus {
      width: 100%;
    }
  }
}
</style>
